<template>
	<view class="">
		<search title="课程"></search>
		 
		 <scroll-view scroll-x  class="navscroll">
			 <view class="item" :class="navIndex==0?'active':''" @click="clickNav(0,'')">全部</view>
			 
		 	<view class="item" :class="(index+1)==navIndex?'active':''" v-for="(item,index) in navArr" @click="clickNav(index+1,item.id)">{{item.zoneName}}</view>
		 </scroll-view> 
		 
		 <view class="content">
				<view class="box"  v-for="item in courses" :key="item.id">
					<image :src="item.cover" mode="aspectFill"  @click="goToCoureseDetail(item.id)"></image>
					<view class="overlay">
						<view class="watch">
							<uni-icons type="videocam" color="white" size="20" >
								<text style="font-size: 14px;">{{item.viewCount}}</text>
							</uni-icons>
						</view>
						<view class="lessons">
							<text>共{{item.lessonNum}}课时</text>
						</view>
					</view>
					<view class="msg">
						<text>{{item.title}}</text>
						<uni-icons type="locked-filled" size="15"  color="red" v-if="item.price!=0">{{item.price}}￥</uni-icons>
						<text v-else style="color: red;">免费观看</text>
					</view>
				</view>
 		</view>
			
	</view>	

	
	
</template>

<script setup>
import {apiGetZone,apiGetPopularCourse} from '@/apis/index.js'
import {apiGetZoneCourse} from '@/apis/class.js'
 import {updateCourseViewCount} from '@/apis/course.js'
import { onLoad } from 'uview-ui/libs/mixin/mixin';
const props = defineProps({
	id:'',
});

const navIndex=ref(0)
const zoneId=ref("")
const navArr=ref([])
const pages=ref(0)
const currentPage=ref(1)
const loading=ref(0)
const courses=ref([])
const courseVo=ref({
		 currentPage:1,
		 pageSize:12,
		 title:'',
		 id:'',
	})

const zoneVo=ref({
		 currentPage:1,
		 pageSize:12,
		 zoneId:'',
})

 
const clickNav=async (index,id)=>{
	navIndex.value=index
	zoneId.value=id
	courses.value=[]
	console.log("==========clickNav点击了=============");
	console.log('index',index);

	console.log(index==0);
	uni.showLoading({
		title:'加载中'
	})
	
	if(index==0){
		courseVo.value.currentPage=1
		getCourse()
	}else{
		zoneVo.value.currentPage=1
		getZoneCourse(id)
	}
	 
	
	
	
}


const getZone=async ()=>{
		let res=await apiGetZone(zoneVo.value)
		navArr.value=res.data.data.records
		
} 


const getCourse= async ()=>{
	     
		let res=await apiGetPopularCourse(courseVo.value)
		console.log("===================视频分页===================");
		console.log(res);
		console.log("====================================");
		if(res.data.data==null){
			loading.value=2
			uni.hideLoading()
			uni.showToast({
				title:'没有更多数据了',
				icon:'none'
			})
			return;
		}
		pages.value=res.data.data.pages
		courses.value=[...courses.value,...res.data.data.records]
		uni.hideLoading()
		
}  


const goToCoureseDetail=(id)=>{
	    updateViewCount(id)
		uni.navigateTo({
			url:"/pages/course/course?id="+id
		})
}


const  getZoneCourse=async (id)=>{
	zoneVo.value.zoneId=id
	let res=await apiGetZoneCourse(zoneVo.value)
	
	if(res.data.data==null){
		loading.value=2
		uni.hideLoading()
		uni.showToast({
			title:'没有更多数据了',
			icon:'none'
		})
		return;
	}
	pages.value=res.data.data.pages
	courses.value=[...courses.value,...res.data.data.records]
	uni.hideLoading()
	console.log("======专区课程==========")
	console.log(courses.value);
}

onReachBottom(()=> {
				console.log("到底部了");
				console.log(courseVo.value.currentPage);
				console.log(pages.value);
				if(loading.value==2){
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
					return;
				}
				uni.showLoading({
					title: '加载中',
					
				})
				
				if(navIndex.value==0){
					
					
					if(pages.value==courseVo.value.currentPage){
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
						return;
					}
					courseVo.value.currentPage++;
					loading.value=1;
					getCourse();
				}else{
					
					if(pages.value==zoneVo.value.currentPage){
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
						return;
					}
					zoneVo.value.currentPage++;
					loading.value=1;
					getZoneCourse(zoneId.value);
				}
	})



const updateViewCount=async (id)=>{
		let res=await updateCourseViewCount(id)
		console.log("更新浏览量成功");
}	
	
const init=()=>{
	console.log("==========init========");
	console.log(props.id);
    getZone()
   
	setTimeout(()=>{
		console.log("===========navArr============");
		console.log(navArr.value);
		if(props.id!=null){
		navArr.value.forEach((item,index)=>{
			if(item.id==props.id){
				navIndex.value=index+1
				
				return;
			}
		})
		
		if(navIndex.value==0){
			getCourse()
		}else{
			getZoneCourse(props.id)
		}
		
		
	}else{
		getCourse()
	}},200)
	
}


init()


</script>

<style lang="scss" scoped>
 .navscroll{
	       
			height: 100rpx;
			background: #F7F8FA;
			white-space: nowrap;
			position: fixed;
			top:160rpx;
			left: 0;
			::v-deep ::-webkit-scrollbar{
				width: 4px !important;
				height:1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}
		
			
			.item{
				font-size: 40rpx;
				display: inline-block;
				line-height:100rpx;
				padding: 0 30rpx;
				color: #333;
				&.active{
					color: #31c27c;
				}
			}
			
	} 
	
	
	.content{
		width: 1000rpx;
	
		margin-top:70rpx;
		
			.box{
				width: 360rpx;
				height: 350rpx;
				display:inline-block;
				margin-right:15rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				
				}
				.overlay {
				  width: 100%;
				  position: absolute;
				  bottom: 10rpx; 
				  background-color: rgba(0, 0, 0, 0.5); 
				  padding: 5rpx 10rpx;
				  border-radius: 5rpx;
				  color: white;
				  display: flex;
				  align-items: center;
				 .watch{
				  	  display: flex;
				  	  align-items: center;
					  
				  } 
				  .lessons {
				    margin-left: 100rpx; 
				  }
				}
				
				.msg{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					/* text{
						
						
					} */
					/* .uni-icons{
						
						margin:10rpx;
						margin-left: 10rpx; 
					} */
					
	
					
					
				}
				
				
			}
		
	}
	

</style>
